<template>
  <div class="box">
    <!-- 拼团进度条 -->
    <van-circle
      v-model:current-rate="count"
      :rate="count"
      :speed="100"
      :text="`拼团进度：${count}%`"
      :color="gradientColor"
      size="200"
    />

    <!-- 倒计时 -->
    <van-count-down :time="time" />
  </div>

  <!-- 拼团商品 -->
  <van-card
    :thumb="team.product.thumbs_text"
    @click-thumb="toProductInfo(team.proid)"
  >
    <template #title>
      <div class="title">{{ team.product.name }}</div>
    </template>

    <template #desc>
      <van-highlight :keywords="`${team.total}`" :source-string="`人数：${team.total}人`" highlight-class="people" />
      拼团时间：{{ team.createtime_text }}(开始) ~ {{ team.endtime_text }}(结束)<br />
      拼团价格：￥{{ team.product.team }}
    </template>

  </van-card>

  <!-- 拼团列表 -->
  <van-list class="team">
    <div class="item" v-for="(item, key) in list" :key="key">
      <van-image
        width="50"
        height="50"
        :src="item.businfo.avatar_text"
        fit="cover"
      />
      <div class="info">
        <div class="nickname" v-if="key == 0">{{ item.businfo.nickname }}(发起人)</div>
        <div class="nickname" v-else>{{ item.businfo.nickname }}</div>
        <div class="time">拼单时间：{{ item.createtime_text }}</div>
      </div>
    </div>
  </van-list>

  <!-- 操作按钮 -->
  <div class="actions">
    <van-button square hairline type="primary" size="large">在线客服</van-button>
    <van-button square hairline type="danger" size="large">发起拼团</van-button>
  </div>


</template>

<script setup>
  const { proxy } = getCurrentInstance();

  let teamid = proxy.$route.query.teamid ? proxy.$route.query.teamid : 0
  let team = ref({
    product: {},
    business:{}
  })
  let list = ref([])
  let count = ref(80)
  let time = ref(30 * 60 * 60 * 1000);
  const gradientColor = {
    '0%': '#3fecff',
    '100%': '#6149f6',
  };

  onBeforeMount(() => {
    TeamInfo()
  })

  //跳转到购物车详情界面
  const toProductInfo = proid => proxy.$router.push({ path: '/product/info', query: { proid } })


  const TeamInfo = async () =>{
    var result = await proxy.$POST({
      url: '/team/info',
      params:{teamid:teamid}
    })

    if (result.code == 0) {
      proxy.$fail(result.msg)
      return false
    }

    team.value = result.data.team
    list.value = result.data.list

    //拼团进度值
    var num = parseFloat(list.value.length / team.value.total).toFixed(2)
    count.value = num * 100


    // 倒计时
    time.value = parseInt(team.value.endtime - team.value.createtime)*1000
  }
</script>

<style>
  .van-circle__text{
    font-size: 20px;
  }

  .van-count-down{
    font-size: 20px;
  }

  .box{
    width:100%;
    text-align: center;
    padding-top: 20px;
  }

  .item{
    width:100%;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    padding-left: 10px;
    margin-top: 10px;
  }

  .item .info{
    margin-left:10px;
  }

  .item .info .nickname,.item .info .time{
    font-size:16px;
    font-weight:bold;
  }


</style>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }

  ::v-deep .van-swipe-cell {
    width: 100%;
  }

  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .van-checkbox-group1{
    overflow: scroll;
    height:615px;
  }

  .actions{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
  }

</style>
